<template>
	<div class="container">
		<!-- <view class="total">共计
			<text class="blue">{{}}</text>
			台
		</view> -->
		<view class="list">
			<view class="filter flex-space-between">
				<view class="time-box" @click="timePicker = true">
					<text class="time">{{ query.timeDate }}</text>
					<text class="iconfont icon-down"></text>
					<u-picker mode="time" v-model="timePicker" :default-time="query.timeDate" :params="params"
						title="选择年月" @confirm="pickerConfirmHandle" start-year="2021" @cancel="timePicker = false"
						confirm-color="#4888FB" />
				</view>
				<view class="type" @click.stop="changeEChartType">
					筛选
					<text class="iconfont icon-xiajiantou"></text>
				</view>
			</view>
			<view class="item" v-for="(item, index) in list" :key="index">
				<view class="time">
					{{ item.activationDate | timeForm }}
				</view>
				<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" lable-width="0" title=""
					class="title" :value="item.agentName" />
				<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="商户名："
					:value="item.merchName" />
				<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="商户号："
					:value="item.merchNo"><i slot="right-icon" class="iconfont icon-niantie"
						@click.stop="copy(item.merchNo)"></i>
				</u-cell-item>
				<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="终端号："
					:value="item.serialno" ><i slot="right-icon" class="iconfont icon-niantie"
						@click.stop="copy(item.serialno)"></i>
				</u-cell-item>

				<u-cell-item :arrow="false" hover-class="none" :border-bottom="false" title="政策："
					:value="item.policyName" />
			</view>
		</view>
		<u-popup v-model="filterPopup" mode="top" :border-radius="20">
			<div class="filter-body">
				<!-- <view class="f-title">筛选条件</view> -->

				<div class="filter-content">
					<u-field label="终端号：" v-model="query.serialno" :label-width="170" input-align="left"
						placeholder="请输入终端号">
					</u-field>
					<u-field :disabled="true" label="政策：" :value="query.policyName" input-align="left"
						:label-width="170" placeholder="请选择" @click="showPicker = true">
						<text class="iconfont icon-Downarrow-R iconfont-right" slot="right" @click="showPicker = true"></text>
					</u-field>
				</div>
				<div class="footer-btn">
					<div class="btn-left">
						<button class="reset" size="large" type="warn" @click="resetHandle">
							重置
						</button>
					</div>
					<div class="btn-right">
						<button class="myBtn" round size="large" @click="queryHandle">
							搜索
						</button>
					</div>
				</div>
			</div>
		</u-popup>
		<u-picker title="政策" v-model="showPicker" mode="selector" :range="policyList" range-key="policyName"
			confirm-color="#4888FB" @confirm="onPolicyConfirm" @cancel="showPicker = false" />
		<uni-load-more :status="loadMore"></uni-load-more>
	</div>
</template>

<script>
	import {
		formDateToString,
		getCurrentMonthFirst1,
		getNowMonthNoDate,
		getCurrentMonthLast,
		getMonthFirst,
		getMonthLast,
	} from "_c/utils/date";
	import loadMoreData from "@/mixins/loadmore";

	import {
		termActiveList
	} from "_a/terminal";

	export default {
		mixins: [loadMoreData],
		data() {
			return {
				list: [],
				query: {
					// activeDateStart: getCurrentMonthFirst1(),
					// activeDateEnd: getCurrentMonthLast(),
					timeDate: getNowMonthNoDate(new Date()),
					checkStatus: 2,
				},
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false,
				},
				timePicker: false,
				filterPopup: false,
				showPicker: false,
			};
		},
		filters: {
			timeForm(v) {
				if (v) {
					return v.slice(5, 10);
				}
			},
		},
		computed: {
			policyList() {
				return this.$store.getters.policyList || [];
			},
		},
		onLoad(o) {
			this.getList();
		},
		methods: {
			onPolicyConfirm(e) {
				console.log(e);
				this.query.policyCode = this.policyList[e[0]].policyCode;
				this.query.policyName = this.policyList[e[0]].policyName;
				// this.chooseIndex = e[0];
			},
			init() {
				this.$nextTick(() => {
					this.list = [];
					// this.getTotal();
					this.refreshLoad();
				});
			},
			resetHandle() {},
			queryHandle() {
				this.$forceUpdate();
				this.init();
				this.filterPopup = false;
			},
			pickerConfirmHandle(item) {
				console.log(item);
				let timeDate = item.year + "-" + item.month;
				this.query.activeDateStart = getMonthFirst(timeDate);
				this.query.activeDateEnd = getMonthLast(timeDate);
				this.query.timeDate = timeDate;
				this.init();
				this.timePicker = false;
			},
			changeEChartType() {
				this.filterPopup = true;
			},
			getList() {
				let params = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					...this.query,
				};
				termActiveList(params).then((res) => {
					var list = res.rows;
					this.loadMoreStatusDeal(list);
					if (list.length > 0) {
						this.list = this.list.concat(list);
					}
				});
			},
			reachBottomCallBack() {
				this.getList();
			},
			copy(value) {
			  uni.setClipboardData({
			    data: value,
			    success: () => {
			      this.$tip.toast("复制成功!");
			    },
			  });
			},
		},
	};
</script>
<style scoped lang='scss'>
	.container {
		padding: R(25);
	}

	.list {
		background: #fff;
		border-radius: R(10);

		.filter {
			padding: R(20);
			font-size: R(24px);
			font-weight: 400;
			color: #666666;
			margin-bottom: R(20);

			.time-box {
				font-size: R(26);
			}

			.icon-xiajiantou {
				font-size: R(24);
				margin-left: R(14);
			}
		}
	}

	.total {
		font-size: R(24);
		font-weight: 400;
		color: #737373;
		margin-bottom: R(20);

		.blue {
			color: #4286f5;
		}
	}

	.item {
		margin: R(25) R(0);
		padding: R(14) R(28) R(24);
		border-bottom: 1px solid #eee;

		.time {
			width: R(114);
			height: R(44);
			line-height: R(44);
			margin-bottom: R(10);
			text-align: center;
			background: #f1f6f8;
			border-radius: R(22);
			font-size: R(26);
			font-weight: 400;
			color: #666666;
		}

		.title {
			font-size: R(30);
			font-weight: bold;
			color: #1a1a1a;

			/deep/.u-cell__value {
				color: #1a1a1a;
			}
		}

		/deep/.u-cell {
			padding: R(4) R(10);

			.u-cell__value {
				text-align: left;
			}
		}
	}

	.filter-body {
		padding: R(30);

		.f-title {
			font-size: R(30);
			text-align: center;
			font-weight: 400;
			color: #999;
		}
	}

	.filter-content {
		margin-bottom: R(30);
	}

	.filter-body .footer-btn {
		display: flex;
		/*position: absolute;*/
		bottom: 0;
		width: 100%;
	}

	.filter-body .footer-btn .btn-left {
		width: 30%;
		margin-left: 15%;
	}

	.filter-body .footer-btn .btn-right {
		width: 30%;
		margin-left: 10%;
	}

	.filter-body .filter-tiem {
		margin-bottom: R(25);
	}

	.filter-body .filter-tiem .tit {
		font-size: R(32);
		color: #333;
	}

	.filter-body .filter-tiem .select-list .select-item {
		float: left;
		width: 33%;
		padding: R(20) R(10);
	}
</style>
